<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考试题</title>
    <style>
        body {
            background: url('../images/vmbg2.png') center/cover no-repeat fixed; /* 使用背景图像 */
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
            margin-top: 20px;
        }

        #questions-container {
            margin: 20px;
        }

        .question {
            margin-bottom: 20px;
        }

        .question-number {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .question-text {
            margin-bottom: 10px;
        }

        .option {
            display: block;
            margin-bottom: 5px;
        }

        .option input[type="radio"] {
            margin-right: 5px;
        }

        .option-label {
            margin-left: 5px;
        }

        #submit-button {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #submit-button:hover {
            background-color: #0062cc;
        }
    </style>
</head>
<body>
<h2>请回答以下考试题：</h2>
<div id="questions-container"></div>
<button id="submit-button">提交</button>
<script src="../util/axios.min.js"></script>
<script>
    window.onload = () => {
        axios.interceptors.request.use(function (config) {
            config.headers.token = localStorage.getItem("token")
            // 在发送请求之前做些什么
            return config;
        });
        axios({
            method: 'get',
            url: 'http://localhost:8080/questionBank/getQuestionList',
        }).then((resp)=>{
            const questions=resp.data.data.questions
            const examId=resp.data.data.examId
            renderQuestions(questions,examId)
        });
        // 将题目数组渲染成 HTML 界面
        function renderQuestions(questions,examID) {
            document.getElementById('submit-button').setAttribute('examId', examID);
            const container = document.getElementById('questions-container');
            questions.forEach((question, index) => {
                // 创建题目元素
                const questionElement = document.createElement('div');
                questionElement.classList.add('question');
                questionElement.dataset.questionId = question.questionId;
                // 添加题目编号
                const questionNumber = document.createElement('p');
                questionNumber.classList.add('question-number');
                questionNumber.textContent = `第 ${index + 1} 题：`;
                questionElement.appendChild(questionNumber);
                // 添加题目文本
                const questionText = document.createElement('p');
                questionText.classList.add('question-text');
                questionText.textContent = question.questionContent;
                questionElement.appendChild(questionText);
                // 解析题目选项
                const options = JSON.parse(question.questionOptions);
                // 添加选项元素
                const optionLetters = ['A', 'B', 'C', 'D'];
                Object.keys(options).forEach((key, i) => {
                    const optionElement = document.createElement('label');
                    optionElement.classList.add('option');
                    const inputElement = document.createElement('input');
                    inputElement.type = 'radio';
                    inputElement.name = `question-${question.questionId}`;
                    inputElement.value = key;
                    optionElement.appendChild(inputElement);
                    const optionLetter = document.createElement('span');
                    optionLetter.textContent = optionLetters[i];
                    optionElement.appendChild(optionLetter);
                    const optionText = document.createElement('span');
                    optionText.classList.add('option-label');
                    optionText.textContent = options[key];
                    optionElement.appendChild(optionText);
                    questionElement.appendChild(optionElement);
                });
                // 添加题目元素到容器中
                container.appendChild(questionElement);
            });
        }

        // 获取用户的选项和题目 ID
        function getAnswers() {
            const answers = [];
            const questionElements = document.querySelectorAll('.question');
            questionElements.forEach(questionElement => {
                const questionId = questionElement.dataset.questionId;
                const selectedOption = questionElement.querySelector('input:checked');
                if (selectedOption) {
                    answers.push({
                        questionId:questionId,
                        answer:selectedOption.value
                    });
                }
            });

            return answers;
        }

        // 提交按钮的逻辑函数
        function handleSubmit() {
                // 获取考试编号
            const examId = this.getAttribute('examId');
                // 在这里执行提交
            const answers =getAnswers()
                // 添加请求拦截器
            axios.interceptors.request.use(function (config) {
                config.headers.token = localStorage.getItem("token")
                // 在发送请求之前做些什么
                return config;
            });
            axios({
                method: 'post',
                url: 'http://localhost:8080/questionBank/answerQuestion',
                data: {answers
                    ,examId}
            }).then((resp)=>{
                if (resp.data.code===200){
                    alert("你的成绩为"+resp.data.data+"分")
                    window.location.reload()
                }
            });
            // 在这里添加将答案提交到服务器的代码
        }

        // 将提交按钮的点击事件绑定到 handleSubmit() 函数上
        document.getElementById('submit-button').addEventListener('click', handleSubmit);
    }
</script>
</body>
</html>
